<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title" v-if="apkManagement && apkManagement.id">
        {{ l('Edit') }}
      </div>
      <div class="modal-title" v-else>{{ l('Create') }}</div>
    </div>
    <div class="modal-body">
      <a-form
        :model="apkManagement"
        @submit="save()"
        autocomplete="off"
        ref="formRef"
        layout="vertical"
        labelAlign="right"
      >
        <a-row :gutter="24">
          <a-col :sm="21">
            <a-form-item
              name="appRevision"
              :label="l('ApkManagementAppRevision')"
              :rules="[{ required: true, message: l('ThisFieldIsRequired'), trriger: 'blur' }]"
            >
              <a-input
                :placeholder="l('ApkManagementAppRevision')"
                v-model:value="apkManagement.appRevision"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="3">
            <a-form-item label=" ">
              <a-checkbox v-model:checked="apkManagement.isNewRevision">
                {{ l('IsNewRevision') }}
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :sm="21">
            <a-form-item
              :label="l('DocumentFileNamePath')"
              required
              :rules="[{ required: true, message: l('ThisFieldIsRequired'), trriger: 'blur' }]"
              name="fileNamePath"
            >
              <a-input
                id="input"
                :placeholder="l('DocumentFileNamePath')"
                v-model:value="apkManagement.fileNamePath"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="4" v-if="apkManagement.fileNamePath">
            <a-button v-if="apkManagement.fileNamePath" @click="copy">
              {{ l('CopyUrl') }}
            </a-button>
          </a-col>
          <a-col :sm="3">
            <a-form-item label=" ">
              <a-upload
                class="fileUpload"
                :action="uploadFileUrl"
                :showUploadList="false"
                :multiple="false"
                v-model:file-list="uploadfileList"
                :headers="uploadHeaders"
                @change="uploadChange"
              >
                <a-button type="primary" style="margin-right: 0px">
                  <upload-outlined />
                  <span>{{ l('FileUpload') }}</span>
                </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :sm="24">
            <a-form-item :label="l('Description')">
              <a-textarea
                v-model:value="apkManagement.description"
                :placeholder="l('Description')"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="save()">
        <i class="acticon acticon-save"></i>
        <span>{{ l('Save') }}</span>
      </a-button>
    </div>
  </a-spin>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import {
    ApkManagementListDto,
    ApkManagementServiceProxy,
    CreateOrUpdateApkManagementInput,
    SysFileListDto,
  } from '/@/shared/service-proxies/service-proxies';
  import { AppConsts } from '/@/abpPro/AppConsts';
  import { UploadFile } from 'ant-design-vue';

  export default defineComponent({
    name: 'create-or-edit-apk-management',
    mixins: [ModalComponentBase],
    props: {
      id: Number,
    },
    data() {
      return {
        apkManagement: new ApkManagementListDto(),
        apkManagementServiceProxy: new ApkManagementServiceProxy(),
        copyText: '',
        uploadFileUrl: '',
        // 上传文件
        uploadfileList: new Array<any>(),
        uploadHeaders: {},
        filepath: AppConsts.remoteServiceBaseUrl + '/File/GetFile?filepath=',
      };
    },

    mounted() {
      this.getData();
    },
    created() {
      this.getFileUploadUrl();
      Object.assign(this.uploadHeaders, {
        Authorization: 'Bearer ' + abp.auth.getToken(),
      });
      this.apkManagement.sysFileListDto = new SysFileListDto();
    },

    methods: {
      /**
       *上传文件
       */
      uploadChange({ file }: { file: UploadFile }): void {
        // 上次成功
        if (file.status === 'done') {
          console.log(file);
          this.apkManagement.sysFileId = file.response.result.id;
          this.apkManagement.fileNamePath =
            this.filepath + file.response.result.path + '&download=true';
          this.apkManagement.sysFileListDto.fileName = file.response.result.fileName;
          this.apkManagement.sysFileListDto.id = file.response.result.id;
          this.notify.success(this.l('SavedSuccessfully'));
          return;
        }

        // 上传失败
        if (file.status === 'error') {
          this.notify.error(this.l('FileSavedFailed'));
        }
      },
      /**
       * 获取上传文件地址
       */
      getFileUploadUrl() {
        this.uploadFileUrl =
          AppConsts.remoteServiceBaseUrl + '/api/services/app/ApkManagement/CreateApkReturnSysFile';
      },
      getData() {
        this.loading = true;
        this.apkManagementServiceProxy
          .getForEdit(this.id)
          .finally(() => {
            this.loading = false;
          })
          .then((res) => {
            this.apkManagement = res.apkManagement;
          });
      },
      /**
       * 提交
       */
      save() {
        (this.$refs.formRef as any).validate().then(() => {
          const input = new CreateOrUpdateApkManagementInput();
          input.apkManagement = this.apkManagement;
          input.apkManagement.tenantId = this.abpSession.tenantId;
          this.saving = true;
          this.apkManagementServiceProxy
            .createOrUpdate(input)
            .finally(() => {
              this.saving = false;
            })
            .then(() => {
              this.notify.success(this.l('SavedSuccessfully'));
              this.success(true);
            });
        });
      },
      /**
       * 复制代码或者链接
       */
      copy() {
        let element = document.getElementById('input') as any;
        element.select();
        document.execCommand('copy');
        window.getSelection().empty();
        this.notify.success(this.l('CopySuccessfully'));
      },
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-col-sm-3) {
    padding-left: 0 !important;
  }
</style>
